<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>weather</title>
    <style>
        .rotate-circle,.tmap-zoom-control{
            display: none !important;
        }
    </style>
</head>

<body>

    <div class="w-screen h-screen flex">
    <div class="w-[460px] px-[20px]">
      <div class="w-[400px] h-[50px] flex items-center justify-between fixed top-0 left-[20px]">
        <div class="w-[100px] h-[24px] bg-[url('./icon-all.png')]"
        style="background-size: 164px; background-position: 0px -200px;">
        </div>
        <div class="w-[258px] h-[30px] flex items-center rounded-[15px] bg-[#f5f5f5] ml-[10px]]">
          <div class="w-[20px] h-[20px] bg-[url('./icon-all.png')]"
          style="background-size: 290px; background-position: -88px 0px;">
          </div>
          <input class="w-[200px] h-[30px] rounded-[15px] bg-[#f5f5f5]" placeholder="搜索城市">
        </div>
      </div>
      <div class="w-[428px] h-[350px] flex flex-col rounded-[15px] bg-gradient-to-t from-[#dce3fb] to-[#fee5ca] mt-[50px]">
        <div class="flex items-center justify-between px-[20px]">
          <div class="w-[150px] h-[22px] flex justify-center items-center py-[40px]">
            <h1 class="w-[54px] h-[22px] text-[18px]">洪山区</h1>
            <span class="w-[80px] h-[22px] text-[10px] flex items-center justify-center">湖北省/中国</span>
          </div>
          <p class="text-[10px]">2025-09-02 14:00</p>
        </div>
        <div class="flex justify-end px-[20px]">
          <div class="w-[80px] h-[30px] flex justify-center items-center rounded-[10px] bg-green-300 text-[20px]">
            AQI优
          </div>
        </div>
        <div class="flex py-[20px]">
          <div class="w-[210px] h-[70px] flex justify-end">
            <img src="./qing.png">
          </div>
          <div>
            <h1 class="w-[50px] h-[30px] text-[20px]">33°</h1>
            <span class="text-[20px]">晴</span>
          </div>
        </div>
        <div class="flex h-[50px] justify-center items-center px-[20px] text-[15px]">
                今天白天晴，夜晚晴，温度和昨天差不多，现在33°，空气不错。
        </div>
        <div class="px-[20px]">
            <div class="flex flex-col rounded-[15px] h-[70px] justify-between py-[10px] bg-[#c2a4a4]">
          <div class="flex justify-between">
            <p class=" px-[20px]">2级</p>
            <p class="px-[20px]">54%</p>
          </div>
          <div class="flex justify-between">
            <p class="text-[10px] px-[20px]">北风</p>
            <p class="text-[7px] px-[20px]">相对湿度</p>
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="w-[1300px] h-screen bg-[#f5f5f5]">

        <div id="container" class=" w-[1278px] h-screen relative">
  
    <div class="flex  flex-col w-[1278px] h-screen items-end p-5 gap-10 absolute ">
                        <!--顶部导航栏-->  
            <div class="flex text-black rounded-[30px] gap-10 ">
                <div class="flex w-[400px] h-[30px] justify-evenly items-center text-[14px]  bg-white rounded-[30px]">
                    <button class="w-[56px] h-[29px]">天气预报</button>
                    <button class="w-[56px] h-[29px]">商业气象</button>
                    <button class="w-[56px] h-[29px]">天气API</button>
                    <div class="flex w-[73px] h-[30px] justify-center items-center ">
                        <img class="w-[12px] h-[16px]" src="phone.png" >
                        <button class="w-[56px] h-[29px]">下载APP</button>
                        </div>
                </div>
                <div class="flex w-[170px] h-[30px] justify-around items-center text-[14px]  bg-white rounded-[30px]">
                    <div class="flex  w-[84px] h-[20px] justify-center items-center p-0">
                        <img src="earth.png"  class="w-[18px] h-[18px]">
                        <button class="w-[84px] h-[20px] justify-center items-center">中文</button>
                    </div>
                    <div class="flex w-[70px] h-[22px] justify-center items-center p-0">
                        <button class="w-[67px] h-[20px]">更多</button>
                        <img src="more01.png" class="w-[14px] h-[12px]">
                    </div>
                    
                </div>
            </div>
            <!--侧边按钮-->
            <div class="flex gap-5 flex-col items-end ">
                <div class=" flex w-[150px] h-[35px] justify-center items-center p-0">
                    <button class="flex w-[60px] h-[26px] bg-white rounded-[26px] text-[14px] justify-center items-center">温度</button>
                    <img src="hot.png" class="w-[32px] h-[32px]">
                </div>
                <div class=" flex w-[150px] h-[35px] justify-center items-center p-0">
                    <button class="flex w-[86px] h-[26px] bg-white rounded-[26px] text-[14px] justify-center items-center">相对湿度</button>
                    <img src="water.png" class="w-[32px] h-[32px]">
                </div>
                    <div class=" flex w-[150px] h-[35px] justify-center items-center p-0">
                        <button class="flex w-[60px] h-[26px] bg-white rounded-[26px] text-[14px] justify-center items-center">云量</button>
                        <img src="cloud.png" class="w-[32px] h-[32px]">
                    </div>
                    <div class=" flex w-[150px] h-[35px] justify-center items-center p-0">
                        <button class="flex w-[86px] h-[26px] bg-white rounded-[26px] text-[14px] justify-center items-center">海浪高度</button>
                        <img src="sea.png" class="w-[32px] h-[32px]">
                    </div>
                    <div class=" flex w-[150px] h-[35px] justify-center items-center p-0">
                        <button class="flex w-[86px] h-[26px] bg-white rounded-[26px] text-[14px] justify-center items-center">更多图层</button>
                        <img src="more02.png" class="w-[32px] h-[32px]">
                    </div>
                    
            </div>
    </div>
</div>
    </div>
  </div>
</body>
 <script src="https://map.qq.com/api/gljs?v=1.exp&key=GAVBZ-AJU33-2OE3L-OSKTD-R3MNQ-VMF6K"></script>
 <script>
    function initMap() {
        //定义地图中心点坐标
        var center=new TMap.LatLng(39.984120,116.307484)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom:17.2,   //设置地图缩放级别
        });
}
    function loadScript() {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=initMap";
     document.body.appendChild(script);
}
  
window.onload = loadScript;
 </script>
<!--GAVBZ-AJU33-2OE3L-OSKTD-R3MNQ-VMF6K-->
</html>